<template>
<div class="box">
    <!-- 竖导航栏 -->
  
    <nav>
        <ul>
            <li v-for="navItem in navList" :key="navItem.id" @click="jumpPage(navItem)">
                <div class="test"></div><!-- 占位div -->
                 <img class="navbk" src="@/assets/imgs/navbk.png" alt="" v-show="navItem.isActive">
                    <img :src='navItem.imgUrlAfter' class="icon" v-show="navItem.isActive">
                    <img :src='navItem.imgUrl' class="icon" v-show="!navItem.isActive">
                     <span>{{navItem.text}}</span> 
            </li>
        </ul>
    </nav>
    <!-- 白色框内容 -->
    <div class="content">
        <!-- 右上角头像姓名 -->
        <div class="info">
            <img src="@/assets/imgs/消息.png" alt="">
            <span class="avatar">
            </span>
            <p class="name">{{userName}}</p>
        </div>
            
        <!-- 每一页的内容  在这里面编写添加内容，其他的不需要更改！！ -->
        <div>
            <!-- <My-score/> -->
             <slot></slot>
        </div>
    </div>
</div>
</template>

<script>
import { useRouter, useRoute } from 'vue-router'
import { onMounted, reactive, ref } from 'vue'
import { useStore } from 'vuex'
// import store from '@/store'
import { forEach } from 'lodash'
// import MyScore from './MyScore'
export default {
  name: 'Course',
//   components:{MyScore},
  setup(props,context){
    const router =  useRouter()
    const route = useRoute()
   const store = useStore()
   const text2 = reactive(['个人信息','课程表','作业管理','考勤记录','请假管理','综合评分','修改密码'])
   const text3 = reactive(['个人信息','课程管理','项目组','考勤管理','请假管理','综合评分','修改密码'])
   const pushUrl2 = reactive(['teachertinfo','schedulingtable','task','attendance','studentLeave','myscore','adminModifyPasswordPopup'])

   const pushUrl3 = reactive(['adminInfo','course','projectTeam','attendance','adminLeave','adminProjectScore','adminModifyPasswordPopup'])
   const userName = ref('学生')
    onMounted(()=>{
        // 判断身份，显示不同的nav描述
        // console.log(store.state);
        if (store.state.user.userid==2) {
            userName.value = '老师'
            let x = 0
            navList.forEach(item => {
               item.text = text2[x]
               item.pushUrl=pushUrl2[x]
               x++
            });
        }
         if (store.state.user.userid==3) {
              userName.value = '管理员'
            let x = 0
            navList.forEach(item => {
               item.text = text3[x]
               item.pushUrl=pushUrl3[x]
               x++
            });
        }
          //   判断当前路由，定位到导航，防止刷新后消失
        navList.forEach(item => {
            item.isActive = false
            if (item.pushUrl===route.fullPath.split('/')[1]) {
                item.isActive = true
            }
        });
        if (route.fullPath=='/home') {
            navList[0].isActive = true
        }

    })
    
      const navList=reactive([
          {id:1,imgUrl:"./static/imgs/nav1.png",imgUrlAfter:"./static/imgs/nav1after.png",text:'个人信息',isActive:true,pushUrl:'studentinfo'},
          {id:2,imgUrl:"./static/imgs/nav2.png",imgUrlAfter:"./static/imgs/nav2after.png",text:'课程管理',isActive:false,pushUrl:'schedulingtable'},
          {id:3,imgUrl:"./static/imgs/nav3.png",imgUrlAfter:"./static/imgs/nav3after.png",text:'作业管理',isActive:false,pushUrl:'task'},
          {id:4,imgUrl:"./static/imgs/nav4.png",imgUrlAfter:"./static/imgs/nav4after.png",text:'考勤记录',isActive:false,pushUrl:'attendance'},
          {id:5,imgUrl:"./static/imgs/nav5.png",imgUrlAfter:"./static/imgs/nav5after.png",text:'请假管理',isActive:false,pushUrl:'studentLeave'},
          {id:6,imgUrl:"./static/imgs/nav6.png",imgUrlAfter:"./static/imgs/nav6after.png",text:'成绩管理',isActive:false,pushUrl:'score'},
          {id:7,imgUrl:"./static/imgs/nav7.png",imgUrlAfter:"./static/imgs/nav7after.png",text:'修改密码',isActive:false,pushUrl:'adminModifyPasswordPopup'}
          ])

      
          function jumpPage(navItem) {
              navList.forEach((item)=>{
                  item.isActive=false
              })

              navItem.isActive=true
                if(navItem.id==1){
                   if (store.state.user.userid==3) {
                       router.push(
                        {name:'adminInfo'}
                    )

                   }else
                   if (store.state.user.userid==2) {
                       router.push(
                        {name:'teachertinfo'}
                    )

                   }
                   else{
                        router.push({name:'studentinfo'})
                   }
                    
                }else 
                if(navItem.id==2){
                   if (store.state.user.userid==3) {
                       router.push(
                        {name:'course'}
                    )
                   }
                   else{
                        router.push(
                        {name:'schedulingtable'}
                    )
                   }
                   
                }else  
                if(navItem.id==3){
                    if (store.state.user.userid==3) {
                       router.push(
                        {name:'projectTeam'}
                    )
                   }
                   else{
                         router.push( {name:'task'} )
                   }
                  
                }else
                if(navItem.id==4){
                    
                    router.push(
                        {name:'attendance'}
                    )
                }else
                if(navItem.id==5){
                   if (store.state.user.userid==3) {
                       router.push(
                        {name:'adminLeave'}
                    )
                   }
                   else{
                         router.push(  {name:'studentLeave'} )
                   }
                   
                }else
                if(navItem.id==6){
                     if (store.state.user.userid==3) {
                       router.push(
                        {name:'adminProjectScore'}
                    )
                   }
                   else{
                        router.push( {name:'score'})
                   }
                    
                }else
                if(navItem.id==7){
                    
                    router.push(
                        {name:'adminModifyPasswordPopup'}
                    )
                }

          }



          return{
              navList,
              jumpPage,
              userName
          }
  }

}
</script>

<style lang="less" scoped>
    .box{
        width: 1534px;
        height: 760px;
        background-color: rgb(194, 218, 226);
        position: relative;
        
        .content{
            position: absolute;
            top:5%;
            left: 10%;
            width: 85%;
            height: 90%;
            background-color: white;
            border-radius: 25px;
            box-shadow:#999 0 0 10px;
            .info{
                position: absolute;
                right: 140px;
                top: 30px;
                .avatar{
                    display: inline-block;
                    width: 40px;
                    height: 40px;
                    border: #999 solid 1px;
                    border-radius: 50%;
                    margin-left: 20px;

                }
                img{
                    width: 35px;
                    height: 35px;
                    margin-left: 20px;

                }
                .name{
                    position: absolute;
                    top:10px;
                    display: inline-block;
                    width: 50px;
                    height: 40px;
                    font-size: 15px;
                    margin-left: 20px;
                }
            }
         
                  .langHr{
                      margin:0 60px;
                    border: 1px solid rgb(194, 218, 226);
                    margin-top: 90px;
                    background-color: rgb(194, 218, 226);
                }
                .shortHr{
                    margin-left: 60px;
                    width: 200px;
                    border: 4px solid rgb(62, 148, 173);
                    margin-top: -4px;
                    border-radius: 20px;
                    background-color: rgb(62, 148, 173);

                }
        }
        nav{
            width: 160px;
           padding-top: 60px;
            ul{
                // position: absolute;
                li{
                    height: 80px;
                    cursor: pointer;
                    position: relative;
                    margin-bottom: 15px;
                    list-style: none;
                    .test{
                         width: 40px;
                        height: 40px;
                    }
                    .icon{
                        position: absolute;
                        width: 40px;
                        height: 40px;
                        top: 20px;
                        left: 30px;
                        //  margin-bottom: 50px;
                        // z-index: 99;
                    }
                    span{
                        position: absolute;
                        left: 75px;
                        top: 30px;
                    }
                    .navbk{
                        position: absolute;
                        width: 190px;
                        height: 130px;
                        top: 0px;
                        left: 5px;
                        //  z-index: -1;
                        
                    }
                }
            }
        }
    }
</style>
